<template>
  <div class="page">
    <div class='empty-contianer' v-if="showFindMore">
      <img src="@i/empty-img.png" class="empty-img">
      <span class="content-text">搜不到想搜的？</span>
      <div class="tip-container">
        <span class="tip-title">您可以向平台提交定制商品监控</span>
        <div class="tip-content">
          <span>1、可以提交未收录在榜单内的商品</span>
          <span>|</span>
          <span>2、实时监控自己品类的销量</span>
          <span>|</span>
          <span>3、监控竞品品类的销量</span>
          <span>|</span>
          <span>4、经营小众产品数据平台无法监控</span>
        </div>
      </div>
      <span class="more-button" @click="showAddProduct = true">申请手动收录</span>
    </div>
    <div class="products" v-else>
      <div class="flex-between">
        <Orders :orderList="orderList" @changeOrders='onChangeOrders'></Orders>
        <div class="filter-container">
          <a-cascader :defaultValue='[0]' changeOnSelect class="mr10" :options="typeData" placeholder="选择类目"
            :fieldNames="fieldNames" @change="onChangeType" v-model:value="cascaderValue" />
          <span class="mr10">价格段</span>
          <a-input-number v-model:value="filterInfo.priceLow" addon-after="$" @change="onNewList"></a-input-number>
          <span class="ml10 mr10">-</span>
          <a-input-number v-model:value="filterInfo.priceHigh" addon-after="$" @change="onNewList"></a-input-number>
          <span class="g-link ml16" @click="showAddProduct = true">找不到想搜的?</span>
        </div>
      </div>
      <div class="product-list" v-if="listData && listData.length > 0">
        <ProductDetail v-for="(item, index) in listData" :detail="item" :key="item.id"></ProductDetail>
      </div>
      <div class='empty-contianer' v-else>
        <img src="@i/empty-img.png" class="empty-img">
        <span class="content-text">此筛选下无数据</span>
        <span class="more-button" @click="onClearFilter">返回全部结果</span>
      </div>
      <Pagination style="padding-right: 20px;" v-if="pageInfo.total" :total="pageInfo.total"
        :page_no="pageInfo.pageNumber" @change="onPageChange" />
    </div>
  </div>
  <AddProduct :showModal="showAddProduct" @onUpdata="showAddProduct = false"></AddProduct>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import Pagination from "@c/Pagination/index.vue";
import AddProduct from '@c/addProduct/index.vue'
import Orders from "@c/Orders/index.vue";
import { search } from '@r/api/product'
import ProductDetail from '@c/productDetail/index.vue'
import { getSheinTypeTree, getSheinType } from '@r/api/productType'
let listData = ref<any[]>([])
let typeData = ref<any[]>([])
let cascaderValue = ref<any[]>([])
let orders = ref<{
  isDescending: boolean
  propertyName?: string
}>({
  isDescending: true,
  propertyName: ''
})
let orderList = [{
  key: 'sales',
  label: '商品销量'
}, {
  key: 'price',
  label: '商品价格'
}]
const showAddProduct = ref(false)
const showFindMore = ref(false)
import { useRouter, useRoute } from "vue-router";
const selectId = ref<number | undefined>(0)
const selectLevel = ref<number | undefined>(undefined)
const appRoute = useRoute()
const pageInfo = ref({
  pageSize: 50,
  pageNumber: 1,
  total: 0
})
const filterInfo = ref({
  priceLow: undefined,
  priceHigh: undefined
})
const fieldNames = { children: 'sons', label: 'name', value: 'id' }
onMounted(() => {
  getList()
  getTypeList()
})

watch(() => appRoute.query.key, (newValue, oldValue) => {
  console.log('watch 已触发', newValue)
  getList()
})
function onChangeOrders(res: any) {
  // console.log(res);
  orders.value = res
  onNewList()
}
function onChangeType(value: any, selectedOptions: any) {
  let item = selectedOptions[selectedOptions.length - 1]
  console.log(item);
  selectId.value = item.id
  selectLevel.value = item.level
  onNewList()
}
function getTypeList() {
  getSheinTypeTree({}).then((res: any) => {
    console.log(res);
    typeData.value = [{ name: '全部品类', level: undefined, id: 0 }, ...res]
    console.log(typeData.value);
  })
}
function onClearFilter() {
  selectId.value = 0
  selectLevel.value = undefined
  filterInfo.value = {
    priceLow: undefined,
    priceHigh: undefined
  }
  cascaderValue.value = []
  onNewList()
}
function getList() {
  search({
    typeId: selectId.value === 0 ? undefined : selectId.value,
    level: selectLevel.value,
    ...pageInfo.value,
    ...filterInfo.value,
    keyword: appRoute.query.key,
    orders: orders.value
  }).then((res: any) => {
    console.log(res);
    if (res) {
      res.items = newNameFunc(res.items)
      listData.value = res.items
      pageInfo.value.total = res.count;
      if (res.count === 0 && selectId.value === 0 && filterInfo.value.priceLow === undefined && filterInfo.value.priceHigh === undefined) {
        showFindMore.value = true
      } else {
        showFindMore.value = false
      }
    }
    console.log(listData.value);
  })
}
function onPageChange({
  page_no,
  page_size,
}: {
  page_no: number;
  page_size: number;
}) {
  pageInfo.value.pageNumber = page_no;
  pageInfo.value.pageSize = page_size;
  getList();
}
function onNewList() {
  pageInfo.value.pageNumber = 1
  getList()
}
// function onSelectMenu(item: any) {
//   selectId.value = item.id
//   selectLevel.value = item.level
//   onNewList()
//   console.log(item, 1111);
// }
function newNameFunc(res: any[]) {
  res = res.map((item: any) => {
    item.newName = `${item.name}(${item.enName})`
    if (item.sons && item.sons.length > 0) {
      item.sons = newNameFunc(item.sons)
    }
    return item
  })
  // console.log(res);
  return res
}
</script>

<style scoped lang="less">
.page {
  display: flex;
  flex-direction: row;
  // height: calc(100vh - 100px);
  height: 100%;
}

.empty-contianer {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 10px;
  margin: 10px 0 0 10px;
  padding: 0px 20px 0 20px;
  flex: 1;
  align-items: center;

  .empty-img {
    height: 116px;
    width: 200px;
    margin-top: 50px;
  }

  .content-text {
    height: 16px;
    opacity: 1;
    font-size: 16px;
    font-weight: normal;
    line-height: 16px;
    text-align: center;
    display: flex;
    align-items: center;
    letter-spacing: 0em;
    color: #666666;
    margin-top: 20px;
  }

  .tip-container {
    margin-top: 34px;
    width: 90%;
    height: 94px;
    border-radius: 10px;
    opacity: 1;
    background: #F7F9FA;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .tip-title {
      height: 16px;
      opacity: 1;
      font-size: 16px;
      font-weight: 500;
      line-height: 16px;
      letter-spacing: 0em;
      color: #333333;
      margin-bottom: 18px;
    }

    .tip-content {
      color: #666666;
      font-size: 14px;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      width: 80%;
    }
  }

  .more-button {
    width: 152px;
    height: 40px;
    border-radius: 50px;
    opacity: 1;
    background: linear-gradient(90deg, #FA7D54 0%, #FF3F3F 99%);
    box-shadow: 0px 4px 10px 0px rgba(254, 68, 65, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    line-height: 16px;
    text-align: center;
    letter-spacing: 0em;
    color: #FFFFFF;
    cursor: pointer;
    margin: 20px 0 30px;
  }
}

.products {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 10px;
  margin: 10px 0 0 10px;
  padding: 0px 20px 0 20px;
  flex: 1;
}

.flex-between {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.filter-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 40px;
  font-size: 14px;
  font-weight: normal;
  line-height: 14px;
  letter-spacing: 0em;
  color: #666666;
  margin: 10px 0;
}

.product-list {
  // flex: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  height: fit-content;
}
</style>